import React, { useEffect } from 'react';
import { Drawer, Form, Input, Select, Button, Space } from 'antd';
import { User } from '@/pages/Settings/UserManagement/types';

const { Option } = Select;

interface UserDrawerProps {
  visible: boolean;
  editingUser: User | null;
  form: any;
  onClose: () => void;
  onFinish: (values: any) => void;
}

const UserDrawer: React.FC<UserDrawerProps> = ({ visible, editingUser, form, onClose, onFinish }) => {
  useEffect(() => {
    if (visible && editingUser) {
      form.setFieldsValue(editingUser);
    } else if (visible) {
      form.resetFields();
    }
  }, [visible, editingUser, form]);

  return (
    <Drawer
      title={editingUser ? '编辑用户' : '添加用户'}
      open={visible}
      onClose={onClose}
      width={600}
      destroyOnClose
      maskClosable
      forceRender
    >
      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          label="用户名"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input placeholder="请输入用户名" />
        </Form.Item>

        <Form.Item
          name="email"
          label="邮箱"
          rules={[
            { required: true, message: '请输入邮箱' },
            { type: 'email', message: '请输入正确的邮箱格式' },
          ]}
        >
          <Input placeholder="请输入邮箱" />
        </Form.Item>

        <Form.Item
          name="phone"
          label="手机号"
          rules={[{ required: true, message: '请输入手机号' }]}
        >
          <Input placeholder="请输入手机号" />
        </Form.Item>

        <Form.Item
          name="role"
          label="角色"
          rules={[{ required: true, message: '请选择角色' }]}
        >
          <Select placeholder="请选择角色">
            <Option value="admin">管理员</Option>
            <Option value="user">普通用户</Option>
          </Select>
        </Form.Item>

        <Form.Item
          name="status"
          label="状态"
          rules={[{ required: true, message: '请选择状态' }]}
        >
          <Select placeholder="请选择状态">
            <Option value="active">激活</Option>
            <Option value="inactive">未激活</Option>
          </Select>
        </Form.Item>

        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">
              {editingUser ? '更新' : '创建'}
            </Button>
            <Button onClick={onClose}>
              取消
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Drawer>
  );
};

export default UserDrawer; 